<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
	<style type="text/css">
	*{margin:0px;padding:0px;font-size:17px;}
	#all{width:560px;height:500px;margin:30px auto;}
	table{width:560px;height:400px;border:solid 1px #333;border-collapse:collapse;}
	input{width:160px;height:30px;border:solid 1px #333;margin-left:5px;}

	.item{width:160px;text-align:center;}

	.cur{border:solid 1px blue;}

	td .pro{border:solid 1px green;}

	</style>
</head>
<body>
	<div id='all'>
	<table border='1'>
		<form action="1.php" method='post' id='form'>
			<tr>
				<td class='item'>用户名:</td>
				<td><input type="text" name='username'><span id='text'> 请输入8~16的用户名</span></td>
			</tr>
			<tr>
				<td class='item'>密码:</td>
				<td><input type="password" name='password'><span> 请输入6~12位密码</span></td>
			</tr>
			<tr>
				<td class='item'>确认密码:</td>
				<td><input type="password" name='repassword'><span> 请再次输入密码</span></td>
			</tr>
			<tr>
				<td class='item'>手机号码:</td>
				<td><input type="text" name='phone'><span> 请输入手机号码</span><button id='but'>获取验证码</button></td>
			</tr>
			<tr>
				<td class='item'>验证码:</td>
				<td><input type="text" name='vcode'><span> 请输入验证码</span></td>
			</tr>

			<tr>
				
				<td colspan='2' style='text-align:center'><input type="submit" value='注册'></td>
			</tr>
		</form>
	</table>
	</div>

	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
	<script type="text/javascript">

	var CU = false;
	var CP = false;
	var CH = false;
	var CC = false;
	//获取用户名
	//获取焦点
	$('input[name=username]').focus(function(){

		$(this).addClass('cur');
	})
	//失去焦点
	$('input[name=username]').blur(function(){

		//获取值
		var v = $(this).val();

		//正则
		var reg = /^\w{8,16}$/;

		//检测
		var test = reg.test(v);
		//获取当前选中的对象 (input)
		var td = $(this);
		// 判断格式  不符合要求  
		if(!test){

			$(this).css('border','solid 1px red');
			$('#text').text(' 用户名输入的格式不正确');
			$('#text').css('color','red');

			CU = false;
		//格式符合要求
		} else {
			//获取当前写入的值
			var uv = $(this).val()
			//以post形式发送ajax
			$.post('checkUser.php',{uv:uv},function(data){
				//判断用户名 如果和数据库中的用户名一样
				if(data == '1'){

					td.css('border','solid 1px red');
					$('#text').text(' 用户名已经存在');
					$('#text').css('color','red');
					//写入的用户名不一样 
				} else {
					td.css('border','solid 1px green');
					$('#text').text(' √').css('color','green');
					CU = true;
					

				}
			})

		}
	})

	//密码
	//获取焦点
	$('input[name=password]').focus(function(){

		$(this).addClass('cur');
	})
	//失去焦点
	$('input[name=password]').blur(function(){
		//获取密码
		var pv = $(this).val();
		//正则匹配
		var reg = /^\w{6,12}$/;
		//检测
		var test = reg.test(pv);
		if(!test){

			$(this).css('border','solid 1px red');
			$(this).next().text(' 密码格式不正确').css('color','red');

			CP = false;
		} else {

			$(this).css('border','solid 1px green');
			$(this).next().text(' √').css('color','green');

			CP = true;
		}

	})

	//确认密码
	//获取焦点
	$('input[name=repassword]').focus(function(){

		$(this).addClass('cur');
	})
	//失去焦点
	$('input[name=repassword]').blur(function(){
		//获取密码的值
		var pv = $('input[name=password]').val();
		//获取确认密码的值
		var rpv = $(this).val();

		//判断
		if(pv != rpv){

			$(this).css('border','solid 1px red');
			$(this).next().text(' 两次密码不一致').css('color','red');
		} else {

			$(this).css('border','solid 1px green');
			$(this).next().text(' √').css('color','green');
		}

	})

	//手机号码
	//获取焦点
	$('input[name=phone]').focus(function(){

		$(this).addClass('cur');
	})

	//失去焦点
	$('input[name=phone]').blur(function(){

		//获取手机号码
		var phv = $(this).val();
		//正则匹配
		var reg = /^1[3|5|7|8]\d{9}$/;
		//检测
		var test = reg.test(phv);

		if(!test) {

			$(this).css('border','solid 1px red');
			$(this).next().text(' 手机号码格式不正确').css('color','red');

			CH = false;

		} else {
			$(this).css('border','solid 1px green');
			$(this).next().text(' √').css('color','green');

			CH = true;
		}
	})

	//获取验证码
	$('#but').click(function(){
		//获取手机号码
		var number = $('input[name=phone]').val()
		//发送ajax
		$.post('./ucpass-demo/yzm.php',{number:number},function(data){

			console.log(data);
		})
		//阻止默认行为
		return false;
	})

	//输入验证码
	//获取焦点
	$('input[name=vcode]').focus(function(){

		$(this).addClass('cur');
	})

	//失去焦点
	$('input[name=vcode]').blur(function(){

		//v获取验证码
		var cv = $(this).val();

		var cd = $(this);

		$.post('checkCode.php',{cv:cv},function(data){

			// console.log(data);

			if(data == '1'){

				cd.css('border','solid 1px red');
				cd.next().text(' 输入的验证码不正确').css('color','red');

				CC = false;


			} else {

				cd.css('border','solid 1px green');
				cd.next().text(' √').css('color','green');

				CC = true;
			}

		})
	})

	//获取submit
	$('#form').submit(function(){

		if(CU && CP && CH && CC){

			return true;
		} else {

			return false;
		}
		
		//阻止默认行为
		return false;
	})

	</script>
</body>
</html>